<template>
  <el-card shadow="always">
    <div class="tree"></div>
  </el-card>
</template>
<script>
import { findChainStoreTree } from "@/api/modules/chain";

var echarts = require("echarts");
export default {
  // props:[],
  // 页面加载
  created() {},
  // 页面加载完成
  mounted() {
    this.getList();
    // this.meterInit();
  },
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {};
  },
  // 方法
  methods: {
    meterInit(data) {
      var chartDom = document.querySelector(".tree");
      var myChart = echarts.init(chartDom);
      var option = {
        series: [
          {
            type: "tree",
            initialTreeDepth: -1,
            name: "tree1",
            data: [data],
            top: "0%",
            left: "2%",
            bottom: "0%",
            right: "30%",
            symbolSize: 10,
            symbol: "circle",

            label: {
              position: "right",
              verticalAlign: "middle",
              align: "left",
              color: "black",
              overflow: "truncate",
              lineHeight: 20,
            },
            itemStyle: {
              borderColor: "#1890ff",
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    getList() {
      findChainStoreTree({
        params: {
          id: sessionStorage.getItem("chainId"),
        },
      }).then((res) => {
        res.data.name = "连锁总部" + "\n" + res.data.userName;
        res.data.children = res.data.storeTypeResponseList;

        res.data.storeTypeResponseList.forEach((x) => {
          x.name = x.storeType;
          x.children = x.findChainStoreTreeSupResponseList;
          x.children.forEach((z) => {
            // z.children= z.findChainStoreTreeSupResponseList
            z.name = z.supUnitName + "\n" + z.userName;
          });

          // z.children.forEach(y=>{
          //   y.name=x.supUnitName+'<br/>'+x.userName
          // })
        });
        this.meterInit(res.data);
        //   list=res.data
        //   this.ecComponentRadar = this.selectComponent("#mychart-dom-radar");
        //   this.initRadar();
      });
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {},
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
.tree {
  height: 800px;
  width: 100%
}
.el-card {
  width: 100%;
}
</style>